<%@page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        h1 {
            position: relative;
            text-align: center;
            width: 10%;
            left: 45%;
        }

        .acc_info {
            width: 50%;
            height: 150px;
            position: relative;
            left: 25%;
            overflow: scroll;
        }

        .atm_operation {
            width: 30%;
            height: 180px;
            position: relative;
            border: 1px solid cadetblue;
            float: left;
            margin-left: 3%;
        }

        .atm_operation form {
            width: 100%;
            position: relative;
            text-align: center;
        }

        .atm_operation span, span, label {
            font-family: 黑体;
            font-weight: bold;
        }

        span {
            font-size: 30px;
        }

        .acc_oper_info {
            width: 80%;
            height: auto;
            position: relative;
            left: 10%;
        }

        .acc_search {
            position: relative;
            width: 100%;
            text-align: center;
        }

        .acc_oper_info table {
            text-align: center;
            width: 100%;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }

        .acc_oper_info table th {
            text-align: center;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
<h1>ATM</h1>
<div class="acc_info">
    <table border="1" cellpadding="0" cellspacing="0" style="text-align: center;width: 100%">
        <thead>
        <tr>
            <th colspan="2">账号信息</th>
        </tr>
        <tr>
            <th>账号</th>
            <th>余额(元)</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="a" items="${accounts}">
            <tr>
                <td>${a.acc}</td>
                <td>${a.money}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<hr>
<div class="atm_operation">
    <span>存钱</span>
    <form action="/atm/acc/save.do">
        <label for="i_c_acc">账号：</label><input id="i_c_acc" type="text" name="acc"><br>
        <label for="i_c_money">金额：</label><input id="i_c_money" type="number" name="money"><br>
        <input type="submit" value="存钱">
    </form>
</div>
<div class="atm_operation">
    <span>取钱</span>
    <form action="/atm/acc/take.do">
        <label for="i_q_acc">账号：</label><input id="i_q_acc" type="text" name="acc"><br>
        <label for="i_q_money">金额：</label><input id="i_q_money" type="number" name="money"><br>
        <input type="submit" value="取钱">
    </form>
</div>
<div class="atm_operation">
    <span>转账</span>
    <form action="/atm/acc/transfer.do">
        <label for="i_zc_acc">转出账号：</label><input id="i_zc_acc" type="text" name="from"><br>
        <label for="i_zr_acc">转入账号：</label><input id="i_zr_acc" type="text" name="to"><br>
        <label for="i_zz_money">转账金额：</label><input id="i_zz_money" type="number" name="money"><br>
        <input type="submit" value="确认并转账">
    </form>
</div>
<hr style="clear: both">
<div class="acc_history">
    <div class="acc_search">
        <span>查询账户流水记录</span>
        <form action="/atm/acc/logs.do">
            <label for="cx_acc">账号：</label><input id="cx_acc" type="text" name="acc" value="${acc}"><input type="submit" value="查询">
        </form>
    </div>
    <div class="acc_oper_info">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th colspan="4">账户：${acc} 流水信息</th>
            </tr>
            <tr>
                <th>序号：</th>
                <th>操作：</th>
                <th>金额(元)：</th>
                <th>时间：</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="log" items="${logs}" varStatus="vs">
                <tr>
                    <td>${vs.index}</td>
                    <td>${log.type}</td>
                    <td>${log.money}</td>
                    <td>${log.time}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
